<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <h2>地址：{{ address }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>

    </div>
</template>

<script lang="ts">
    export default{
        name:'Person',
            // data() {
            //     return{
            //         name:'zhangsan',
            //         age:18,
            //         tel:'18888888888',
            //         address:'华北电力大学'
            //     }
            // },
            // methods:{
            //     showTel(){
            //         alert(this.tel)
            //     }
            // }
        setup(){
            let name= 'zhangsan'//这些数据都不是响应式的，所以按按钮之后不会变化
            let age=18
            let tel='18888888888'
            let address='华北电力大学'

            function changeName(){
                name='张三'
            }
            function changeAge(){
                age++
            }
            function showTel(){
                alert(tel)
            }

            return{name,age,tel,address,changeName,changeAge,showTel}
        }
    }
</script>

<style scoped>
.person{
    background: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>